<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Use correct character set. -->
    <meta charset="utf-8" />
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>缓冲区</title>
      <link href="https://cdn.jsdelivr.net/npm/cesium@1.85.0/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/cesium@1.85.0/Build/Cesium/Cesium.js"></script>
<!--    <script  src="./Utils/CesiumPopup.js"></script>-->
    <!-- <script src="./Utils/CesiumInterView.js"></script> -->
    <script src="../Utils/CesiumBufferUtil.js"></script>

    <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
    <style>
      html,
      body,
      #cesiumContainer {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #infobox {
        position: absolute;
        top: 20px;
        left: 30px;
        font-size: 14px;
        z-index: 99;
        padding: 10px 20px;
        background-color: white;
        border: 1px solid #cccccc;
      }
      .toolbox {
        position: absolute;
        top: 49%;
        left: 30px;
        z-index: 99;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      .tool-item {
        background-color: #303336;
        cursor: pointer;
      }


/* pop框css*/
.cesium-popup-panel {
  opacity: 0.8;
  width: 312px;
  position: absolute;
  z-index: 999;
  color: #00fcf9;

  background: rgba(23, 50, 108, 0.6);
  border: 1px solid #4674d6;
}
.cesium-popup-tip-panel {
  width: 40px;
  height: 20px;
  position: absolute;
  left: 50%;
  bottom: -20px;
  margin-left: -20px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.8;
}
.cesium-popup-tip-bottom {
  width: 17px;
  background: rgba(23, 50, 108, 0.8);
  border-bottom: 1px solid #4674d6;
  height: 17px;
  padding: 1px;
  margin: -10px auto 0;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.cesium-popup-header-panel {
  /* display: flex; */
  /* justify-content: space-between; */
  align-items: center;
  font-size: 14px;
  padding: 5px 15px;
  background: rgba(23, 50, 108, 0.8);

  border-bottom: 1px solid #4674d6;
}

.cesium-poput-header-title {
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #ffffff;
}

.cesium-popup-content-panel {
  padding: 18px;
}
.cesium-popup-close-btn{
  float: right;
  position: relative;
  right: 10px;
}
.cesium-popup-close-btn,
.cesium-popup-close-btn:focus {
  cursor: pointer;
}
cesium-popup-close-btn > svg:hover {
  color: #00fcf9 !important;
}
.cesium-popup-close-btn > svg {
  user-select: auto;
  color: #4674d6;
  cursor: pointer;
  width: 15px;
  /* height: 15px; */
}


    </style>
  </head>
  <body>
    <div id="infobox"></div>
    <div class="toolbox">
<!--      <input type="color">-->
      <button id="zoomIn" class="tool-item">
        <img class="tool-image" src="../SampleData/zoomIn.png" alt="" />
      </button>
      <button id="zoomOut" class="tool-item">
        <img class="tool-image" src="../SampleData/zoomOut.png" alt="" />
      </button>

      <button id='point' style="color: white;" class="tool-item">点</button>
      <button id='line' style="color: white;" class="tool-item">线</button>
      <button id='polygon' style="color: white;" class="tool-item">面</button>

      <button id='clear' style="color: white;" class="tool-item">清除</button>

    </div>
    <div id="cesiumContainer"></div>
  </body>
  <script type="module">

    var viewer = new Cesium.Viewer('cesiumContainer', {
      imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
        url : 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer',
        // url:
        //   "https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
      }),
      shouldAnimate: true,
      timeline: false,
      animation: false,
      shadow:false
    });
    viewer._cesiumWidget._creditContainer.style.display = 'none'; // 隐藏版权
    viewer.scene.globe.show = true;
    viewer.scene.debugShowFramesPerSecond = true;

    var tilesets = new Cesium.Cesium3DTileset({
      url: '../SampleData/end3d/tileset.json',
      skipLevelOfDetail: true,
      maximumMemoryUsage: 1500,
      maximumScreenSpaceError: 16,
      // cullRequestsWhileMovingMultiplier: 100,
      dynamicScreenSpaceError: false,
      preferLeaves: true,
      debugShowContentBoundingVolume: false,
      debugShowViewerRequestVolume: false,
      debugShowBoundingVolume: false,
    });
    tilesets.readyPromise
      .then(function (tileset) {
        viewer.scene.primitives.add(tileset);
        viewer.flyTo(tileset);
      })
      .otherwise(function (error) {
        console.log(error);
      });


    var bufferTool =  new CesiumBufferUtil(viewer)
    document.getElementById('point').onclick = function(){
      bufferTool.active({type:'Point',radius:0.005})
    }
    document.getElementById('line').onclick = function(){
      bufferTool.active({type:'Line',radius:0.01})
    }
    document.getElementById('polygon').onclick = function(){
      bufferTool.active({type:'Polygon',radius:0.01})
    }
    document.getElementById('clear').onclick = function(){
      bufferTool.deactive()
    }

    // 放大缩小
    document.getElementById('zoomIn').onclick = function () {
      // 获取当前镜头位置的笛卡尔坐标
      let cameraPos = viewer.camera.position;
      // 获取当前坐标系标准
      let ellipsoid = viewer.scene.globe.ellipsoid;

      // 根据坐标系标准，将笛卡尔坐标转换为地理坐标
      let cartographic = ellipsoid.cartesianToCartographic(cameraPos);
      // 获取镜头的高度
      let height = cartographic.height;
      // if (height < 40) {
      //   return
      // }
      // 镜头拉近
      viewer.camera.zoomIn(height / 3);
    };

    document.getElementById('zoomOut').onclick = function () {
      // 获取当前镜头位置的笛卡尔坐标
      let cameraPos = viewer.camera.position;
      // 获取当前坐标系标准
      let ellipsoid = viewer.scene.globe.ellipsoid;

      // 根据坐标系标准，将笛卡尔坐标转换为地理坐标
      let cartographic = ellipsoid.cartesianToCartographic(cameraPos);
      // 获取镜头的高度
      let height = cartographic.height;
      // if (height < 40) {
      //   return
      // }
      // 镜头拉近
      viewer.camera.zoomOut(height * 1.2);
    };
    //经纬度显示
    viewer.screenSpaceEventHandler.setInputAction(function (event) {
      var earthPosition = viewer.camera.pickEllipsoid(
        event.position,
        viewer.scene.globe.ellipsoid
      );
      var cartographic = Cesium.Cartographic.fromCartesian(
        earthPosition,
        viewer.scene.globe.ellipsoid,
        new Cesium.Cartographic()
      );
      var lat = Cesium.Math.toDegrees(cartographic.latitude);
      var lng = Cesium.Math.toDegrees(cartographic.longitude);
      var height = viewer.camera.positionCartographic.height;
      document.getElementById('infobox').innerHTML =
        '<span>经度：' +
        lng.toFixed(3) +
        '</span>' +
        '<span>  纬度：' +
        lat.toFixed(3) +
        '</span>' +
        '<span>  相机高度：' +
        height +
        '</span>';
      // console.log(lat, lng, height);
    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
  </script>
</html>
